<template>
	<div class="details">
		<mt-swipe :show-indicators="false" class='swipe' :auto="0" @change="handleChange">
		  <mt-swipe-item>
			  <img :src="img" />
		  </mt-swipe-item>
		  <mt-swipe-item>
			  <img :src="img" />
		  </mt-swipe-item>
		  <mt-swipe-item>
			  <img :src="img" />
		  </mt-swipe-item>
		</mt-swipe>
		<div class="icon-font">
			<router-link to="/goods"><i class="iconfont icon-fanhui2"></i></router-link>
			<Popover placement="bottom" >
				<div slot="content" class="popover-demo-content">
				    <router-link to="/"><li><i class="iconfont icon-home_icon"></i>首页</li></router-link>
				    <li><i class="iconfont icon-aixin"></i>我的收藏</li>
				</div>
				<i class="iconfont icon-gengduo"></i>
			</Popover>
			<i class="iconfont icon-fenxiang"></i>			
		</div>
		<div class="index">
			{{activeIndex}}/3
		</div>
		<div class="txt">
			<span>￥{{price}}</span>
			<span>￥{{bigPrice}}</span>
			<span>特价</span>
			<span class="iconfont icon-fenxiang"></span>
			<span>{{title}}</span>
			<span>{{introduce}}</span>
		</div>
		<div class="logo">好品质，放心买！</div>
			<div class="select" @click="fn()">已选</div>
			<!-- 地址start -->	
				<el-cascader
				  size="large"
				  :options="options"
				  v-model="selectedOptions"
				  @change="Change"
				  class="site"
				  value="请选择配送地址"
				  >
				</el-cascader>
			<!-- 详情start -->
			<transition
			    enter-class=""
			    enter-active-class="animated fadeInUp"
			    enter-to-class=""
			    leave-class=""
			    leave-active-classj="animated fadeOutDwon"
			    leave-to-class=""				
			>
				<div class="select-two" v-if="show">
					<div class="off" @click="show=false">×</div>
					<img :src="img" />
					<div class="select-three">
						<span>￥{{price}}</span>
						<span>请选择颜色</span>
						<span>颜色</span>
						<aside>
							<i v-for="(i,o) in color" :key="color[o]" class="sb">{{color[o]}}</i>
						</aside>
						
						<span>数量</span>

						<span @click="minus(title)">-</span>
						<span>{{n}}</span>
						<span @click="plus(title)">+</span>
						<span>花呗分期</span>
					</div>
					<scroller lock-y class="lock-y">
						 <div class="box1">
							<div class="box1-item">
								分3期(含手续费)
							</div>
							<div class="box1-item">
								分6期(含手续费)
							</div>
							<div class="box1-item">
								分12期(含手续费)
							</div>
							<div class="box1-item">
								分24期(含手续费)
							</div>
						 </div>
						<mt-button type="danger" class="confirm" @click="add(title)">确定</mt-button>
					</Scroller>	

				</div>
			</transition>
		<!-- footer -->
		<div class="footer">
			<ul>
				<li>
					<u class="iconfont icon-kefu"></u><br />
					客服
				</li>
							
				<li>
					<u class="iconfont icon-aixin"></u><br />
					收藏
				</li>
				<router-link to="/buytwo">
				<li>
					<u class="iconfont icon-icon-test"></u><br />
					购物车
				</li>
				</router-link>
			</ul>
			<div class="footer-right" @click="fn()">
			<button-tab class="bot-button" >
				<button-tab-item selected class="button-left" >
					{{ ('加入购物车') }}
				</button-tab-item>
				<button-tab-item class="button-right">
					<span class="vux-reddot-s">{{ ('立即购买') }}</span>
				</button-tab-item>
			</button-tab>
			</div>
		</div>
	</div>
</template>


<script>
	import { Swipe, SwipeItem,Button , Toast} from 'mint-ui';
	import testData from "../../../data/db.json";

	import { Scroller,Popover,ButtonTab, ButtonTabItem,CodeToText,Group, Cell} from 'vux';
	import { provinceAndCityData} from 'element-china-area-data';
	import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
	export default{
		data(){
			return{
				activeIndex:1,
				show:false,
				options: provinceAndCityData,
				selectedOptions: [],
				img : '',
				price : '',
				bigPrice : '',
				title : '',
				introduce : '',
				color : [],
				n:1,
				t:''
			}
		},
		computed:{
			...mapState({
				 nm: (state,getters)=>{
					 
					 return state.rng.nm;
				 }
			 }),
			// ...mapGetters(['allMoney'])
		},
		async mounted(){
			//console.log(this.$store.state.rng.goods)
			
            var id = this.$route.query.id;
			this.title = this.$route.query.title;
			var t = this.title;
			//this.n = JSON.parse(localStorage.getItem('good'))[t].num; 
			
            var type = this.$route.query.type;
			var {data}= await this.$axios.get(this.$base +"/"+ type +'?id=' + id);
            if(data.length === 0){
				
            }else{
                this.title = data[0].title;
				this.img = this.$base +'/'+ data[0].img;
				this.price = data[0].price;
				this.bigPrice = data[0].bigPrice;
				this.introduce = data[0].introduce;
				this.color = eval('(' + data[0].color + ')')
            }
			
        },
		destroyed(){
			var t = this.title;
			var ll = JSON.parse(localStorage.getItem('good'))[t];
			this.n = ll.num;
		},
		methods:{
			handleChange(index) {
				this.activeIndex = index+1				
			},
			fn(){
				this.show = true
			},
			Change (value) {
				var ctt = CodeToText[value[0]] + CodeToText[value[1]]
				
			  },
			consoleIndex () {
			     
			    },
			add(title){
				this.show = false
				Toast({
				  message: '成功加入购物车',
				  position: 'middle',
				  duration: 1000
				});
				
				var ar = '' + title;
				
				var ag = JSON.parse(localStorage.getItem('good'));
				var buy = JSON.parse(localStorage.getItem('buy'));
				//localStorage.setItem('buy',JSON.stringify(item))
				for(var h in ag){
					if(ar == h){
						//获取名字对应的对象
						var nei = ag[ar];
						//把对象赋值给名字
						buy[ar] = nei;
						localStorage.setItem('buy',JSON.stringify(buy))
					}
				}
				
			},
			// ...mapActions(['jia']),
			...mapActions({
				
				jia : 'rng/jia',
				jian : 'rng/jian'
			}),
			plus(czw){
				
				this.jia(czw)
				//console.log(this.nm);
				var op = JSON.parse(localStorage.getItem('good'))[czw];
				//console.log(op)
				//console.log(op)
				this.n = op.num;
			},
			minus(title){
				this.jian(title);
				var op = JSON.parse(localStorage.getItem('good'))[title];
				this.n = op.num;
			}
		},
		
		 components: {
			Scroller,
			Popover,
			CodeToText,
			provinceAndCityData,
			ButtonTab,
			ButtonTabItem
		  }
	}
</script>

<style lang="scss">
	.details{
		width: 100%;
		height: 100%;
		overflow: auto;
		position: relative;
		.icon{
			height: 0.86rem;
			width: 0.86rem;
			font-size: 0.86rem;
		}
	}
	.mint-swipe-items-wrap{
		width: 100%;
		height: 10.24rem;
		img{
			width:100%;
			height: 10.24rem;
			z-index: -12;
		}		
	}
	.swipe{
		width: 100%;
		height: 10.24rem!important;
		overflow: hidden;
	}
	.icon-font{
		width: 100%;
		position: absolute;
		top: 0.4rem;
		i{
			display: block;
			width:0.94rem ;
			height: 0.94rem;
			text-align: center;
			line-height: 0.94rem;
			border-radius: 50%;
			font-size: 0.7rem;
			color: #fff;
			background: rgba($color: #000, $alpha:0.2);
		}
		.icon-fanhui2{
			float: left;
			margin-left: 0.3rem;
		}
		.icon-gengduo{
			float: right;
			margin: 0 0.3rem;
		}
		.icon-fenxiang{
			float: right;
		}		
	}
	.popover-demo-content{
		width: 4.3rem;
		height: 2.4rem;
		background-color: #fff;
		z-index: 13;
		color: #000000;
		position: absolute;
		right:-0.3rem;
		border-radius: 0.2rem;
		li{
			list-style: none; 
			height: 1.18rem;
			text-align: left;
			line-height: 1.18rem;
			i{
				float: left;
				margin-left: 0.8rem;
				margin-right: 0.4rem;
			}
		}
	}
	.vux-popover-arrow-up{
		border-bottom: 5px solid #fff;
	}
	.index{
		width: 0.7rem;
		height: 0.55rem;
		border-radius: 0.2rem;
		background: rgba($color: #000000, $alpha: 0.2);
		font-size: 0.16rem;
		color: #fff;
		text-align: center;
		line-height: 0.55rem;
		position: absolute;
		top: 9.2rem;
		right: 0.85rem;
	}
	.txt{
		width: 10.45rem;
		height: 3.5rem;
		position: relative;
		padding-left: 0.35rem;
	}
	.txt span:nth-child(1){
		font-size: 0.5rem;
		color: #b70b09;
		font-weight: bold;
		position: absolute;
		top: 0.7rem;
	}
	.txt span:nth-child(2){
		font-size: 0.2rem;
		color: #c7c7c7;
		text-decoration: line-through;
		position: absolute;
		top: 0.82rem;
		left: 2.4rem;
	}	
	.txt span:nth-child(3){
		font-size: 0.2rem;
		color: red;
		display: block;
		width: 0.8rem;
		height: 0.4rem;
		background: rgba($color: red, $alpha: 0.1);
		text-align: center;
		line-height: 0.4rem;
		border-radius: 0.2rem;
		position: absolute;
		top: 0.82rem;
		left: 3.6rem;
	}
	.txt span:nth-child(4){
		display: block;
		width:0.9rem ;
		height: 0.9rem;
		text-align: center;
		line-height: 0.90rem;
		border-radius: 50%;
		font-size: 0.6rem;
		color: #686868;
		background: rgba($color: #000, $alpha:0.1);
		position: absolute;
		right: 0.3rem;
		top: 0.3rem;
	}
	.txt span:nth-child(5){
		font-size: 0.4rem;
		color: #333;
		position: absolute;
		top: 1.86rem;
		font-weight: bold;
	}
	.txt span:nth-child(6){
		font-size: 0.3rem;
		position: absolute;
		top: 2.7rem;
	}
	.logo{
		width: 100%;
		height: 1rem;
		background: #faf9f5;
		color: #a08153;
		text-align: center;
		line-height: 1rem;
		font-weight: bold;
		border-bottom: 1px solid #ece5db;
	}
	.select{
		width: 10.4rem;
		height: 1.3rem;
		border-top: 0.25rem solid #f8f8f8;
		color: #aeaeae;
		font-size: 0.4rem;
		line-height: 1.3rem;
		padding-left: 0.4rem;
	}
	.select-two{
		width: 100%;
		height: 15rem;
		background: #fff;
		position: absolute;
		bottom: 0;
		img{
			width: 2.4rem;
			height: 2.4rem;
			margin-top: 0.4rem;
			margin-left: 0.3rem;
		}
	}
	.site{
		width: 100%;
		height: 0.8rem;
		text-align: center;
		color: #aeaeae;
		font-size: 0.3rem;
		line-height: 1.3rem;
	}
	.box1 {
	  height: 1rem;
	  position: relative;
	  width: 16.6rem;
	  margin-top: 6rem;
	}
	.box1-item {
	  width: 4rem;
	  height: 1.5rem;
	  background:#f4f4f4;
	  display:inline-block;
	  margin-left: 0.15rem;
	//   float : left;
	  text-align: center;
	  line-height: 1.5rem;
	  border-radius: 0.2rem;
	  color: #bbb;
	}
	.confirm{
		width: 10rem;
		height: 1.15rem;
		margin-left: 0.4rem;
		margin-top: 2.4rem;
	}
	.select-three{
		margin-left: 3rem;
		margin-top: -2rem;
		position: relative;
		z-index: 123;
	}
	.select-three span:nth-child(1){
		font-size: 0.4rem;
		color: #b60a0a;
		font-weight: bold;
	}
	.select-three span:nth-child(2){
		font-size: 0.3rem;
		color: #666;
		position: absolute;
		top: 0.8rem;
		left: -0.1rem;
	}
	.select-three span:nth-child(3){
		font-size: 0.3rem;
		color: #666;
		position: absolute;
		top: 2.4rem;
		left: -2.4rem;
	}
	aside{
		display: flex;
		width: 100%;
		height: 1rem;
		position: absolute;
		top: 3rem;
		left: -2.4rem;
		i{
			font-style : normal;
			padding : 0 0.5rem;
			height: 0.85rem;
			display: block;
			background:rgba($color: #000000, $alpha: 0.1);
			border-radius: 0.2rem;
			text-align: center;
			line-height: 0.85rem;
			margin-right: 0.5rem;
		}
	}
	.select-three span:nth-child(5){
		font-size: 0.3rem;
		color: #666;
		position: absolute;
		left: -2.4rem;
		top: 5rem;
	}
	.select-three span:nth-child(6){
		position: absolute;
		top: 4.8rem;
		right: 3.54rem;
		font-size: 0.6rem;
		font-weight: bold;
	}
	.select-three span:nth-child(7){
		width: 1rem;
		height: 0.8rem;
		display: block;
		background:rgba($color: #000000, $alpha: 0.1);
		border-radius: 0.2rem;
		text-align: center;
		line-height: 0.8rem;
		position: absolute;
		top: 4.8rem;
		right: 2rem;
		font-weight: bold;
	}
	.select-three span:nth-child(8){
		position: absolute;
		top: 4.8rem;
		right: 1.1rem;
		font-size: 0.6rem;
		font-weight: bold;
	}
	.select-three span:nth-child(9){
		font-size: 0.3rem;
		color: #666;
		position: absolute;
		left: -2.4rem;
		top: 6rem;
	}
	.off{
		position: absolute;
		top: 0.2rem;
		right: 0.4rem;
		font-size: 0.6rem;
	}
	.footer{
		width: 100%;
		height: 1.6rem;
		ul{
			width: 3.3rem;
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 0.54rem;
			li{
				float: left;
				font-size: 0.24rem;
				u{
					text-decoration: none;
					font-size: 0.6rem;
				}
			}
		}
	}
	.footer-right{
		position: absolute;
		top: 0.3rem;
		right: 0.2rem;
		z-index: 14;
	}
	.bot-button{
		width: 6.08rem;
		height: 1rem;
		position: absolute;
		right: 0.2rem;
		.button-left {
			text-decoration: none;
			font-size: 0.3rem;
		}
		.button-right{
			text-decoration: none;
			font-size: 0.3rem;
		}
	}
</style>
